import React, { useImperativeHandle, useRef, useState } from "react"
import './index.css'
type RefType = {
  form: {
    username: string,
    password: string,
    email: string
  },
  resetForm: () => void,
  validate: () => boolean | string
}
export default function Demo08() {
  const childRef = useRef<RefType>(null)
  return <>
    <h1>useImperativeHandle示例</h1>
    <p>需配合ref一起使用，18版本还需要配合forwardRef一起使用</p>
    <p>子组件暴露自己的属性或者方法，供父组件调用。 类似于Vue的defineExpose</p>
    <h1>实际应用</h1>
    <div>父组件</div>
    <button onClick={() => console.log(childRef.current!.form)}>获取表单信息</button>
    <button onClick={() => console.log(childRef.current!.validate())}>校验表单信息</button>
    <button onClick={() => childRef.current!.resetForm()}>重置表单信息</button>
    <Child ref={childRef} />
  </>
}

// 18版本
// const Child = forwardRef((_, ref) => {
//   const [username, setUsername] = useState('')
//   const [password, setPassword] = useState('')
//   const [email, setEmail] = useState('')
//   useImperativeHandle(ref, () => ({
//     form: {
//       username,
//       password,
//       email
//     },
//     resetForm,
//     validate 
//   }))
//   const resetForm =() => {
//     setUsername('')
//     setPassword('')
//     setEmail('')
//   }
//   const validate = () => {
//     if (!username) {
//       return '请输入用户名'
//     } else if (!password) {
//       return '请输入密码'
//     } else if (!email) {
//       return '请输入邮箱'
//     }
//     return true
//   }
//   return <div style={{marginTop: '20px'}}>
//     <div>子组件</div>
//     <input placeholder="请输入用户名" type="text" value={username} onChange={e => setUsername(e.target.value)} />
//     <input placeholder="请输入密码" type="text" value={password} onChange={e => setPassword(e.target.value)} />
//     <input placeholder="请输入邮箱" type="text" value={email} onChange={e => setEmail(e.target.value)} />
//   </div>
// })

// 19版本
const Child = ({ref}: {ref: React.Ref<RefType>}) => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [email, setEmail] = useState('')
  useImperativeHandle(ref, () => ({
    form: {
      username,
      password,
      email
    },
    resetForm,
    validate 
  }))
  const resetForm =() => {
    setUsername('')
    setPassword('')
    setEmail('')
  }
  const validate = () => {
    if (!username) {
      return '请输入用户名'
    } else if (!password) {
      return '请输入密码'
    } else if (!email) {
      return '请输入邮箱'
    }
    return true
  }
  return <div style={{marginTop: '20px'}}>
    <div>子组件</div>
    <input className="input" placeholder="请输入用户名" type="text" value={username} onChange={e => setUsername(e.target.value)} />
    <input className="input" placeholder="请输入密码" type="text" value={password} onChange={e => setPassword(e.target.value)} />
    <input className="input" placeholder="请输入邮箱" type="text" value={email} onChange={e => setEmail(e.target.value)} />
  </div>
}